<template>
  <h3>MBTI人格测试结果表</h3>
  <el-card>
    <el-row class="search">
      <el-col :span="8">
        <el-input class="input" v-model="queryParam.Sno" placeholder="输入学号查找"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button class="search-but" @click="getdata" type="primary" icon="el-icon-search">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button class="search-but" @click="gotoStudentPage" type="primary">显示学生信息</el-button>
      </el-col>
    </el-row>
  </el-card>
  <el-table :data="testResultTableData" class="message" height="590" border style="width: 100%"
            :header-cell-style="tableHeaderColor">
    <el-table-column v-for="item in itemOptions" :key="item.id" :label="item.title" :prop="item.key" width="100px">
    </el-table-column>
  </el-table>
</template>

<script>
import axios from "axios"
import router from "@/router";


export default {
  data() {
    return {
      queryParam: {
        Sno: "",
      },
      itemOptions: [
        { id: 0, title: "学号", type: "text", key: "Sno" },
        { id: 1, title: "第一题", type: "text", key: "Answer_1" },
        { id: 2, title: "第二题", type: "text", key: "Answer_2" },
        { id: 3, title: "第三题", type: "text", key: "Answer_3" },
        { id: 4, title: "第四题", type: "text", key: "Answer_4" },
        { id: 5, title: "第五题", type: "text", key: "Answer_5" },
        { id: 6, title: "第六题", type: "text", key: "Answer_6" },
        { id: 7, title: "第七题", type: "text", key: "Answer_7" },
        { id: 8, title: "第八题", type: "text", key: "Answer_8" },
        { id: 9, title: "第九题", type: "text", key: "Answer_9" },
        { id: 10, title: "第十题", type: "text", key: "Answer_10" },
        { id: 11, title: "第十一题", type: "text", key: "Answer_11" },
        { id: 12, title: "第十二题", type: "text", key: "Answer_12" },
        { id: 13, title: "第十三题", type: "text", key: "Answer_13" },
        { id: 14, title: "第十四题", type: "text", key: "Answer_14" },
        { id: 15, title: "第十五题", type: "text", key: "Answer_15" },
        { id: 16, title: "第十六题", type: "text", key: "Answer_16" },
        { id: 17, title: "第十七题", type: "text", key: "Answer_17" },
        { id: 18, title: "第十八题", type: "text", key: "Answer_18" },
        { id: 19, title: "第十九题", type: "text", key: "Answer_19" },
        { id: 20, title: "第二十题", type: "text", key: "Answer_20" },
        { id: 21, title: "第二十一题", type: "text", key: "Answer_21" },
        { id: 22, title: "第二十二题", type: "text", key: "Answer_22" },
        { id: 23, title: "第二十三题", type: "text", key: "Answer_23" },
        { id: 24, title: "第二十四题", type: "text", key: "Answer_24" },
        { id: 25, title: "第二十五题", type: "text", key: "Answer_25" },
        { id: 26, title: "第二十六题", type: "text", key: "Answer_26" },
        { id: 27, title: "第二十七题", type: "text", key: "Answer_27" },
        { id: 28, title: "第二十八题", type: "text", key: "Answer_28" },
        { id: 29, title: "第二十九题", type: "text", key: "Answer_29" },
        { id: 30, title: "第三十题", type: "text", key: "Answer_30" },
        { id: 31, title: "第三十一题", type: "text", key: "Answer_31" },
        { id: 32, title: "第三十二题", type: "text", key: "Answer_32" },
        { id: 33, title: "第三十三题", type: "text", key: "Answer_33" },
        { id: 34, title: "第三十四题", type: "text", key: "Answer_34" },
        { id: 35, title: "第三十五题", type: "text", key: "Answer_35" },
        { id: 36, title: "第三十六题", type: "text", key: "Answer_36" },
        { id: 37, title: "第三十七题", type: "text", key: "Answer_37" },
        { id: 38, title: "第三十八题", type: "text", key: "Answer_38" },
        { id: 39, title: "第三十九题", type: "text", key: "Answer_39" },
        { id: 40, title: "第四十题", type: "text", key: "Answer_40" },
        { id: 41, title: "第四十一题", type: "text", key: "Answer_41" },
        { id: 42, title: "第四十二题", type: "text", key: "Answer_42" },
        { id: 43, title: "第四十三题", type: "text", key: "Answer_43" },
        { id: 44, title: "第四十四题", type: "text", key: "Answer_44" },
        { id: 45, title: "第四十五题", type: "text", key: "Answer_45" },
        { id: 46, title: "第四十六题", type: "text", key: "Answer_46" },
        { id: 47, title: "第四十七题", type: "text", key: "Answer_47" },
        { id: 48, title: "第四十八题", type: "text", key: "Answer_48" },
        { id: 49, title: "第四十九题", type: "text", key: "Answer_49" },
        { id: 50, title: "第五十题", type: "text", key: "Answer_50" },
        { id: 51, title: "第五十一题", type: "text", key: "Answer_51" },
        { id: 52, title: "第五十二题", type: "text", key: "Answer_52" },
        { id: 53, title: "第五十三题", type: "text", key: "Answer_53" },
        { id: 54, title: "第五十四题", type: "text", key: "Answer_54" },
        { id: 55, title: "第五十五题", type: "text", key: "Answer_55" },
        { id: 56, title: "第五十六题", type: "text", key: "Answer_56" },
        { id: 57, title: "第五十七题", type: "text", key: "Answer_57" },
        { id: 58, title: "第五十八题", type: "text", key: "Answer_58" },
        { id: 59, title: "第五十九题", type: "text", key: "Answer_59" },
        { id: 60, title: "第六十题", type: "text", key: "Answer_60" },
        { id: 61, title: "第六十一题", type: "text", key: "Answer_61" },
        { id: 62, title: "第六十二题", type: "text", key: "Answer_62" },
        { id: 63, title: "第六十三题", type: "text", key: "Answer_63" },
        { id: 64, title: "第六十四题", type: "text", key: "Answer_64" },
        { id: 65, title: "第六十五题", type: "text", key: "Answer_65" },
        { id: 66, title: "第六十六题", type: "text", key: "Answer_66" },
        { id: 67, title: "第六十七题", type: "text", key: "Answer_67" },
        { id: 68, title: "第六十八题", type: "text", key: "Answer_68" },
        { id: 69, title: "第六十九题", type: "text", key: "Answer_69" },
        { id: 70, title: "第七十题", type: "text", key: "Answer_70" },
        { id: 71, title: "第七十一题", type: "text", key: "Answer_71" },
        { id: 72, title: "第七十二题", type: "text", key: "Answer_72" },
        { id: 73, title: "第七十三题", type: "text", key: "Answer_73" },
        { id: 74, title: "第七十四题", type: "text", key: "Answer_74" },
        { id: 75, title: "第七十五题", type: "text", key: "Answer_75" },
        { id: 76, title: "第七十六题", type: "text", key: "Answer_76" },
        { id: 77, title: "第七十七题", type: "text", key: "Answer_77" },
        { id: 78, title: "第七十八题", type: "text", key: "Answer_78" },
        { id: 79, title: "第七十九题", type: "text", key: "Answer_79" },
        { id: 80, title: "第八十题", type: "text", key: "Answer_80" },
        { id: 81, title: "第八十一题", type: "text", key: "Answer_81" },
        { id: 82, title: "第八十二题", type: "text", key: "Answer_82" },
        { id: 83, title: "第八十三题", type: "text", key: "Answer_83" },
        { id: 84, title: "第八十四题", type: "text", key: "Answer_84" },
        { id: 85, title: "第八十五题", type: "text", key: "Answer_85" },
        { id: 86, title: "第八十六题", type: "text", key: "Answer_86" },
        { id: 87, title: "第八十七题", type: "text", key: "Answer_87" },
        { id: 88, title: "第八十八题", type: "text", key: "Answer_88" },
        { id: 89, title: "第八十九题", type: "text", key: "Answer_89" },
        { id: 90, title: "第九十题", type: "text", key: "Answer_90" },
        { id: 91, title: "第九十一题", type: "text", key: "Answer_91" },
        { id: 92, title: "第九十二题", type: "text", key: "Answer_92" },
        { id: 93, title: "第九十三题", type: "text", key: "Answer_93" },
      ],
      testResultTableData: [],
    };
  },
  created() {
    this.getdata();
  },
  methods: {
       tableHeaderColor({rowIndex}) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #58B2FF;font-weight: 500;'
      }
    },
    gotoStudentPage() {
      router.push('/visualization')
    },
    async getdata() {
      let data = {
        Sno: this.queryParam.Sno
      };
      let config = {
        headers: {
          'Content-Type': "application/json, charset=UTF-8"
        }
      };
    axios.get('http://localhost:8080/chinasoccer/TestResultGet?Sno='+this.queryParam.Sno, data,config).then(res => {
        this.testResultTableData = res.data.data.value;
      }).catch(error => {
        console.error(JSON.stringify(error))
      });
    },
  },
};
</script>
<style>

</style>